<template>
  <div class="default-table-detail-container">
    <BaseTableInfo v-model="baseTableInfoModel" />
  </div>
</template>

<script lang="tsx" setup>

import PurchaseOrderInfoDetailApi from '~/src/api/webPath/PurchaseOrderInfoDetailApi';
import PurchaseOrderInfoApi from '/@/api/webPath/PurchaseOrderInfoApi.ts';

const props = defineProps({
  modelValue: {

  }
})
const route = useRouter()

const baseTableInfoModel = ref({
  columnCount: 3,
  autoFit: false,
  columnWidth: '300px',
  labelWidth: '100px',
  title: '基本信息',
  modelData: {},
  itemList: [
    {
      title: '',
      items: [   //渲染样式区域  通过key ===model 中的值
        //                                   {
        // label: "id",
        //                               field: "id",
        //                         },
        //                                                                           {
        // label: "收货人",
        //                               field: "deliveryName",
        //                         },
        //                                                                           {
        // label: "收货电话",
        //                               field: "deliveryTelephone",
        //                         },
        //                                                                           {
        // label: "详细收货地址",
        //                               field: "deliveryAddress",
        //                         },
        {
          label: "订单编号",
          field: "orderCode",
        },
        {
          label: "订单名称",
          field: "orderName",
        },
        // {
        //   label: "所属公司",
        //   field: "companyId",
        // },
        //                                                                           {
        // label: "采购人id",
        //                               field: "purchaserId",
        //                         },

        {
          label: "采购批次",
          field: "purchaserBatch",
        },
        {
          label: "创建人",
          field: "creatorName",
        },
        {
          label: "修改人",
          field: "reviserName",
        },
        // {
        //   label: "排序",
        //   field: "sort",
        // },
        // {
        //   label: "时间信息",
        //   field: "descriptionTitle",
        //   isTitle: true
        // },
        {
          label: "创建时间",
          field: "create_time",
        },
        {
          label: "更新时间",
          field: "update_time",
        },
        {
          label: "采购清单详情",
          field: "descriptionTitle",
          isTitle: true
        },
      ]
    },
  ],

  tableModel: {
    descriptionTitle: "采购清单详情",
    border: true,
    pagination: true,
    inline: true,
    selectable: false,
    isFullscreen: false,
    showToolbar: false,
    minWidth: '200px',
    data: {    //table  初始化
      current: 1,
      size: 10,
      total: 100,
      data: []
    },
    requestData: { api: PurchaseOrderInfoDetailApi.getPageData, query: { orderId: props.modelValue?.query.purchaseOrderInfoId } },   //数据源 参数有效性： 'steady|transient'
    columns: [
      //    {
      //     label: "id",
      //     field: "id",
      //     width:100,
      //       },
      // {
      //   label: "排序",
      //   field: "sort",
      //   width: 120,
      // },
      // {
      //   label: "关联采购单号",
      //   field: "orderId",
      //   width: 120,
      //   noExported: true,
      // },
      {
        label: "餐次",
        field: "mealTimes",
        width: 180,

      },
      {
        label: "班组",
        field: "teamsGroups",
        width: 180,
      },
      {
        label: "名称",
        field: "foodName",
        width: 180,
      },
      {
        label: "采购数量",
        field: "num",
        width: 150,
      },
      {
        label: "单位",
        field: "unit",
        width: 180,
      },
      {
        label: "单价",
        field: "unitPrice",
        width: 150,
      },
      {
        label: "单位",
        field: "priceUnit",
      },
      {
        label: "总价",
        field: "totalPrice",
        width: 150,
        // noExported: true,
      },
      {
        label: "单位",
        field: "totalPriceUnit",
        // noExported: true,
      },

      // {
      //   label: "创建人",
      //   field: "creatorName",
      //   width: 180,
      // },
      // {
      //   label: "修改人",
      //   field: "reviserName",
      //   width: 180,
      // },
      {
        label: "供应商",
        field: "supplierName",
        width: 200,
      },
      {
        label: "创建时间",
        field: "create_time",
        width: 200,
      },
      {
        label: "更新时间",
        field: "update_time",
        width: 200,
      },
    ],


    actions: [
    ]

  },

  buttons: [   //标题操作区域


    // {
    //   name: "导出",
    //   buttonClass: 'primary',
    //   width: 100,
    //   click: ({ row, handlers }) => {   //暴露的方法钩子
    //     PurchaseOrderInfoDetailApi.pageDataXls(handlers.getRequestParams(), handlers.getXlsTitle())
    //   }
    // },
  ]
})

// onMounted(async () => {
//   //初始化数据model
//   const { data } = await PurchaseOrderInfoApi.getDetail({
//     purchaseOrderInfoId: props.modelValue.query.purchaseOrderInfoId   //从路由中获取参数
//   })
//   console.log("orderCode", props.modelValue.query.orderCode)
//   baseTableInfoModel.value.modelData = data;
// })
onMounted(async () => {
  try {
    //初始化数据model
    const { data } = await PurchaseOrderInfoApi.getDetail({
      purchaseOrderInfoId: props.modelValue.query.purchaseOrderInfoId   //从路由中获取参数
    });
    baseTableInfoModel.value.modelData = data;
  } catch (error) {
    console.error("获取详情失败:", error);
    // 这里可以添加错误提示，例如使用 Element Plus 的 Message 组件
  }
});
</script>

<style lang="scss" scoped>
.default-table-detail-container {
  :deep() {
    .el-form--inline {
      .el-form-item {
        margin-right: 10px;
      }
    }

    .el-descriptions__label {
      min-width: 80px !important;
      text-align: right;
    }
  }
}
</style>
